<!DOCTYPE>
<html>
<head>
  <title>MarkerCluster</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&libraries=visualization&key=RD6BZ-KGRE3-VPT3H-3WFIY-WBF4E-ITFX6"></script>
  <style type="text/css">
      html,body{
          width:100%;
          height:100%;
      }
      ul, li {
          margin: 0;
          padding: 0;
      }

      #map_canvas {
          position: absolute;
          left: 320px;
          min-width: 800px;
          height: 90%;
          border: 1px solid #ff0000;
      }

      #panel {
          position: relative;
          width: 300px;
          height: 500px;
          overflow: auto;
          border: 1px solid #000000;
      }

      #attributeList li {
          border-bottom: 1px dashed #999999;
          padding: 5px 5px;
          line-height: 20px;
      }
  </style>
</head>
<body onload="window.init()">
<div id="map_canvas"></div>
<script type="text/javascript">
  var markerIndex = 0;
  var map;

  function $(a) {
    return document.getElementById(a);
  }
  var data = [
    [39.959228, 116.367874],
    [39.984486, 116.427612],
    [39.988169, 116.279984],
    [39.847558, 116.402893],
    [39.941857, 116.383667],
    [40.022882, 116.551208],
    [39.819085, 116.581421],
    [39.924482, 116.205826],
    [39.757880, 116.162567],
    [39.631606, 116.325989],
    [39.797986, 116.415253],
    [40.117990, 116.416626],
    [40.271668, 116.638412],
    [40.143190, 116.236038],
    [39.928168, 116.515503],
    [39.902362, 116.389160],
    [39.935539, 116.377487]
  ];
  window.init = function() {

    var Map = qq.maps.Map;
    var Marker = qq.maps.Marker;
    var LatLng = qq.maps.LatLng;
    var Event = qq.maps.event;

    var MarkerImage = qq.maps.MarkerImage;
    var MarkerShape = qq.maps.MarkerShape;
    var MarkerAnimation = qq.maps.MarkerAnimation;
    var Point = qq.maps.Point;
    var Size = qq.maps.Size;
    var ALIGN = qq.maps.ALIGN;

    var MVCArray = qq.maps.MVCArray;
    var MarkerCluster = qq.maps.MarkerCluster;
    var Cluster = qq.maps.Cluster;
    var MarkerDecoration = qq.maps.MarkerDecoration;

    var forEach = function (array, fun) {
      for (var i = 0, l = array.length; i < l; ++i) {
        if (fun(array[i], i) === false) {
          return false;
        }
      }
    };

    var latlng = new LatLng(39.91, 116.38);
    var options = {
      'zoom': 11,
      'center': latlng,
      'mapTypeId': "roadmap",
      keyboardShortcuts: false, //设置禁止通过键盘控制地图。默认情况下启用键盘快捷键。
      scrollwheel: true,        //设置滚动缩放默认不允许
      mapStyleId: 'style1'
    };

    var map = new Map($('map_canvas'), options);

    var markers = new MVCArray();
    var markerCluster;

    function createCluster() {
      for (var i = 0; i < data.length; i++) {
        var latLng = new LatLng(data[i][0], data[i][1]);
        var decoration = new MarkerDecoration(i, new Point(0, -5));
        var marker = new Marker({
          'position': latLng,
          map: map
        });
        markers.push(marker);
      }

      markerClusterer = new MarkerCluster({
        map: map,
        minimumClusterSize: 2, //默认2
        markers: markers,
        zoomOnClick: true, //默认为true
        gridSize: 30, //默认60
        averageCenter: true, //默认false
        maxZoom: 18, //默认18
      });

      Event.addListener(markerClusterer, 'clusterclick', function (evt) {
        // writeLog("mouse event", eventType);
        var ss = evt;
        // alert('点击了聚合点');
      });
    };

    createCluster();


    var imgPath = "./images/";
    var Styles = {
      "People": [
        {
          icon: new MarkerImage(imgPath + "people35.png", new Size(35, 35), new Point(0, 0), new Point(16, 0)),
          text: new MarkerDecoration('<font style="color:#ff00ff;font-size:10px;font-weight:bold;">{num}</font>', new Point(0, 5))
        }
      ],
      "Conversation": [
        {
          icon: new MarkerImage(imgPath + "conv30.png", new Size(30, 27), new Point(0, 0), new Point(3, 0)),
          text: new MarkerDecoration('<font style="color:#ff00ff;font-size:10px;font-weight:bold;">{num}</font>', new Point(0, -2))
        }
      ]
    };
  }



</script>
</body>
</html>
